<template>
      <div class="animation-box" v-if="isShow">
            <ul class="element-box" id="elementBox">
                  <template v-for="(item, index) in liParams">
                        <li :style="{left: item.left, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}"     :class="item.cls" :data-index="index" @webkitAnimationEnd="removeDom">
                           <i :style="{ transform: item.transforms, webkitTransform: item.transforms}" :class="{'animation-icon1': item.imgClass === 1,'animation-icon2': item.imgClass === 2,'animation-icon3': item.imgClass===3}"></i>
                          </li>
                    </template>
              </ul>
        </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
      liParams: [],
      timer: null,
      duration: 5000 // 定义时间
    }
  },
  mounted() {
    this.startRedPacket()
  },
  methods: {
    /**
     * 开启动画
     */
    startRedPacket() {
      let win = document.documentElement.clientWidth || document.body.clientWidth
      let left = parseInt(Math.random() * (win - 50) + 0)
      let rotate = (parseInt(Math.random() * (45 - (-45)) - 45)) + "deg"  // 旋转角度
      let durTime = (Math.random() * (2.5 - 2.4 + 1) + 2.4) + 's' // 时间  1.2和1.2这个数值保持一样
      let chooseImg = parseInt(Math.random() * 10)
      let imgClass = 1
      if (chooseImg > 0 && chooseImg < 3) {
        imgClass = 1
      } else if (chooseImg > 3 && chooseImg < 6) {
        imgClass = 2
      } else {
        imgClass = 3
      }
      this.liParams.push({ left: left + 'px', cls: 'move', transforms: 'rotate(' + rotate + ')', durTime: durTime, imgClass: imgClass })
      setTimeout(() => {   // 多少时间结束
        clearTimeout(this.timer)
        return
      }, this.duration)
      setTimeout(() => {
        this.$emit('onShowBtn')
      }, 400)
      this.timer = setTimeout(() => {
        this.startRedPacket()
      }, 100)
    },
    /**
     * 回收dom节点
     */
    removeDom(e) {
      let target = e.currentTarget
      document.querySelector('#elementBox').removeChild(target)
      if (!document.querySelector('#elementBox').hasChildNodes()) {
        this.$emit('clear')
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.animation-box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 2.35rem;
}
.element-box {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .animation-icon1 {
    width: 1rem;
    height: 1rem;
    display: block;
    background: url("../assets/img/animation-icon1.png") center no-repeat;
    background-size: cover;
  }
  .animation-icon2 {
    width: 1rem;
    height: 1rem;
    display: block;
    background: url("../assets/img/animation-icon2.png") center no-repeat;
    background-size: cover;
  }
  .animation-icon3 {
    width: 1.4rem;
    height: 1.4rem;
    display: block;
    background: url("../assets/img/animation-icon3.png") center no-repeat;
    background-size: cover;
  }
  li {
    position: absolute;
    animation: all 3s linear;
    top: -100px;
    z-index: 10;
    &.move {
      -webkit-animation: aim-move 3s linear 1 forwards;
      animation: aim-move 3s linear 1 forwards;
    }
  }
}
@keyframes aim-move {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(120vh);
    transform: translateY(120vh);
  }
}
</style>